<script setup lang="ts">
import {reactive, ref} from "vue";
import {changeUserEmail, changeUserPhone, changeUserRole, deleteUserById, getUserList} from "@/api/user";
import {ElMessage, ElMessageBox} from "element-plus";

defineOptions({
  name: "User"
});
const form = reactive({
  name: ""
});
const formRef = ref();
const dataList = ref([]);
const loading = ref(true);


const changeRoleDialog = ref(false);
const changeUserId = ref();
const roleId = ref(0);
const changeInfoDialog = ref(false);
const userInfo = ref();
const changeType = ref();

async function onSearch() {
  loading.value = true;
  const {data} = await getUserList({current: dataList.value.current, name: form.name});
  console.log(data);
  dataList.value = data.data;
  setTimeout(() => {
    loading.value = false;
  }, 500);
}

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};

//修改权限
const change = () => {
  changeUserRole({id: changeUserId.value, roleId: roleId.value}).then(() => {
    ElMessage({message: "修改完成", type: "success"})
    onSearch()
  })
      .catch(() => {
        ElMessage({message: "修改失败", type: "error"})
      })
}
//修改权限
const changeUser = () => {
  if (changeType.value === 'email') {
    changeUserEmail({id: changeUserId.value, email: userInfo.value}).then(() => {
      ElMessage({message: "修改完成", type: "success"})
      onSearch()
    })
        .catch(() => {
          ElMessage({message: "修改失败", type: "error"})
        })
  } else if (changeType.value === 'phone') {
    changeUserPhone({id: changeUserId.value, phone: userInfo.value}).then(() => {
      ElMessage({message: "修改完成", type: "success"})
      onSearch()
    })
        .catch(() => {
          ElMessage({message: "修改失败", type: "error"})
        })
  }
  changeType.value = "";
  changeUserId.value = "";


}
//删除用户
const deleteUser = (res: any) => {
  deleteUserById(res).then(() => {
    ElMessage({message: "修改完成", type: "success"})
    onSearch()
  })
      .catch(() => {
        ElMessage({message: "修改失败", type: "error"})
      })
}
const onCellDbclick = (row: any) => {
  console.log(row);
  changeInfoDialog.value = true;
  changeUserId.value = row.id;
}
const handleChangeCurrent = (val: any) => {
  dataList.value.current = val;
  onSearch();
}

onSearch();
</script>

<template>
  <div class="main">
    <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="用户名称：" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请输入用户名称"
            clearable
            class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            :loading="loading"
            @click="onSearch"
        >
          搜索
        </el-button>
        <el-button @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList.records" table-layout="fixed" @cell-dblclick="onCellDbclick">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column prop="phone" label="联系方式"/>
      <el-table-column prop="created" label="注册时间"/>
      <el-table-column prop="lastLogin" label="最后登录"/>
      <el-table-column label="角色">
        <template v-slot="scope">
          <el-tag :type="scope.row.roleId === 0 ? 'primary':'success'"
                  @click="changeRoleDialog=true;changeUserId=scope.row.id">
            {{ scope.row.roleId === 0 ? "管理员" : "普通用户" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="scope">
        <el-popconfirm title="确认删除吗" @confirm="deleteUser(scope.row.id)">
          <template #reference>
            <el-button type="primary" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <div style="width: 100%">
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="dataList.total"
          :page-size="dataList.size"
          @current-change="handleChangeCurrent"
      />
    </div>
  </div>


  <!--  使用Dialog对话框实现修改权限-->
  <el-dialog v-model="changeRoleDialog" title="请选择新权限" width="500">
    <el-radio-group v-model="roleId" size="small">
      <el-radio-button label="管理员" value="0"/>
      <el-radio-button label="用户" value="1"/>
    </el-radio-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeRoleDialog = false">取消</el-button>
        <el-button type="primary" @click="change();changeRoleDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  使用Dialog对话框实现修改联系方式、邮箱等信息-->
  <el-dialog v-model="changeInfoDialog" title="修改信息" width="500">
    <el-select placeholder="请选择要修改的信息" v-model="changeType">
      <el-option label="email" value="email"></el-option>
      <el-option label="phone" value="phone"></el-option>
    </el-select>
    <el-input v-model="userInfo"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeInfoDialog = false">取消</el-button>
        <el-button type="primary" @click="changeUser();changeInfoDialog = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>